<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand">{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn1">
              <el-input
                class="my-input"
                size="small"
                style="width: 136px!important;"
                placeholder="查找"
                v-model.trim="inputValue"
                @keyup.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
              <div style="margin-left:5px">
                <el-button
                  class="add"
                  :class="{'active' : newcolor}"
                  size="small"
                  @mousedown.native="adddown"
                  @mouseup.native="addup"
                  @click="addshow"
                  round
                  v-if="addBool"
                >新增
                </el-button>
                <el-button
                  class="edit"
                  @mousedown.native="editdown"
                  @mouseup.native="editup"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  @click="editshow"
                  round
                  v-if="editBool"
                >修改
                </el-button>
                <el-button
                  class="delete"
                  @mousedown.native="deletedown"
                  @mouseup.native="deleteup"
                  :class="{'active2' : newcolor2}"
                  size="small"
                  @click="deletedata"
                  round
                  v-if="editBool"
                >删除
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @current-change="handleCurrentChange"
            @row-click="clickHandler"
          >
            <el-table-column label="客户简称" width="200">
              <template slot-scope="scope">
                <span style="color: #757575;">{{scope.row.customerName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="职位名称" width="550"></el-table-column>
            <el-table-column prop="level" label="职位级别" width="280"></el-table-column>
            <el-table-column prop="arrangement" label="级别层次" width="280"></el-table-column>
            <el-table-column prop="salary" label="职位年薪"></el-table-column>
            <el-table-column prop="price" label="职位报价"></el-table-column>
          </el-table>
          
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="删除职位"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该职位吗？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="delPost">确 定</el-button>
        <el-button round @click="deleteClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何职位</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog class="addP" title="新增职位" :visible.sync="dialogFormVisible" width="415px" :before-close="cancelAdd">
      <div class="dialogBox">
        <el-form :model="form" class="formList" :rules="rules" ref="formP" label-position="top">
          <el-form-item label="客户简称" :label-width="formLabelWidth" prop="customerName">
            <el-select v-model="form.customerName" placeholder="请选择客户简称">
              <el-option v-for="item in empolyList" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" placeholder="请输入职位名称" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位级别" :label-width="formLabelWidth" prop="level">
            <el-input v-model="form.level" placeholder="请输入职位级别" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="级别层次(选填)" :label-width="formLabelWidth" prop="arrangement">
            <el-input v-model="form.arrangement" placeholder="请输入级别层次(可不填)" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位年薪" :label-width="formLabelWidth" prop="salary">
            <el-input v-model="form.salary" placeholder="请输入职位年薪" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位报价" :label-width="formLabelWidth" prop="price">
            <el-input v-model="form.price" placeholder="请输入职位报价" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" type="primary" round @click="addPost('formP')">确 定</el-button>
        <el-button class="cancel" round @click="cancelAdd">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog class="addP" title="修改职位" :visible.sync="editVisible" width="415px" :before-close="cancelEdit">
      <div class="dialogBox">
        <el-form :model="clickRow" class="formList" :rules="rules" ref="formT" label-position="top">
          <el-form-item label="客户简称" :label-width="formLabelWidth" prop="customerName">
            <el-select v-model="clickRow.customerName" placeholder="请选择客户简称">
              <el-option v-for="item in empolyList" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="clickRow.name" placeholder="请输入职位名称" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位级别" :label-width="formLabelWidth" prop="level">
            <el-input v-model="clickRow.level" placeholder="请输入职位级别" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="级别层次(选填)" :label-width="formLabelWidth" prop="arrangement">
            <el-input v-model="clickRow.arrangement" placeholder="请输入级别层次" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位年薪" :label-width="formLabelWidth" prop="salary">
            <el-input v-model="clickRow.salary" placeholder="请输入职位年薪" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位报价" :label-width="formLabelWidth" prop="price">
            <el-input v-model="clickRow.price" placeholder="请输入职位报价" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" type="primary" round @click="editPost('formT')">确 定</el-button>
        <el-button class="cancel" round @click="cancelEdit">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import qs from "qs";
  
  export default {
    name: "postmanage",
    data() {
      return {
        title: "",
        clickRow: {},
        secondtitle: "",
        secondshow: false,
        addShow: false,
        addBool: true,
        editBool: true,
        newcolor: false,
        newcolor1: false,
        newcolor2: false,
        inputValue: "",
        tableData: [],
        currentPage: 1,
        pagesize: 15,
        dialogVisible: false,
        editdialogVisible: false,
        currentRow: null,
        totalcount: 0,
        type: null,
        addPageBool: false,
        rowId: 0,
        dialogFormVisible: false,
        form: {
          customerName: "",
          name: "",
          level: "",
          arrangement: "",
          salary: "",
          price: ""
        },
        formLabelWidth: "100px",
        empolyList: [],
        editVisible: false,
        rules: {
          customerName: [
            {required: true, message: "请选择客户简称", trigger: "change"}
          ],
          name: [{required: true, message: "请输入职位名称", trigger: "blur"}],
          level: [{required: true, message: "请输入职位级别", trigger: "blur"}],
          arrangement: [
            {required: false, message: "请输入级别层次", trigger: "blur"}
          ],
          salary: [
            {required: true, message: "请输入职位年薪", trigger: "blur"}
          ],
          price: [{required: true, message: "请输入职位报价", trigger: "blur"}],
        }
      };
    },
    created() {
      this.title = this.$route.meta.title;
      this.success();
    },
    methods: {
      // tableshow(row) {
      //   this.addShow = false;
      //   this.secondshow = false;
      //   this.$refs.singleTable.setCurrentRow(row);
      //   this.type = null;
      // },
      //获取表格数据
      success() {
        axios
          .post(this.url + "/position/getPositionList", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
              this.clickRow = {};
            }
          });
      },
      //发送删除请求
      delPost() {
        axios
          .post(
            this.url + "/position/delPosition",
            qs.stringify({
              id: this.rowId
            })
          )
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.currentPage = 1;
              this.success();
              this.dialogVisible = false;
              this.clickRow = {};
              document.documentElement.style.overflow = 'auto';
            }
          });
      },
      //新增发送请求
      addPost(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            axios.post(this.url + "/position/addPostion", this.form).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                this.currentPage = 1;
                this.success();
                this.dialogFormVisible = false;
                document.documentElement.style.overflow = 'auto';
                this.$refs.formP.resetFields();
              }
            });
          }
        });
      },
      //取消添加
      cancelAdd() {
        this.dialogFormVisible = false;
        this.$refs.formP.resetFields();
        document.documentElement.style.overflow = 'auto';
      },
      //取消修改
      cancelEdit(row) {
        this.editVisible = false;
        document.documentElement.style.overflow = 'auto';
        this.$refs.singleTable.setCurrentRow(row);
        this.$refs.formT.resetFields();
        this.currentRow = null;
        this.clickRow = {};
      },
      //新增按钮
      addshow() {
        this.dialogFormVisible = true;
        document.documentElement.style.overflow = 'hidden';
        axios.get(this.url + "/position/getEmployList").then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.empolyList = res.data.data;
          }
        });
      },
      //修改按钮
      editshow() {
        if (this.currentRow == null) {
          this.editdialogVisible = true;
          document.documentElement.style.overflow = 'hidden';
        } else {
          this.editdialogVisible = false;
          this.editVisible = true;
          document.documentElement.style.overflow = 'hidden';
          axios.get(this.url + "/position/getEmployList").then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.empolyList = res.data.data;
            }
          });
        }
      },
      editPost(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            for (let i = 0, len = this.empolyList.length; i < len; i++) {
              if (this.clickRow.customerName == this.empolyList[i].name) {
                this.clickRow.customerId = this.empolyList[i].id
              }
            }
            axios.post(this.url + "/position/upPosition", this.clickRow).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                this.success();
                this.editVisible = false;
                this.clickRow = '';
                document.documentElement.style.overflow = 'auto';
              }
            });
          }
        });
      },
      //点击当前行触发事件
      clickHandler(row) {
        this.rowId = row.id;
        this.clickRow = row;
      },
      //鼠标按下新增按钮
      adddown() {
        this.newcolor = true;
      },
      //点击按钮弹起
      addup() {
        this.newcolor = false;
      },
      //鼠标按下修改按钮
      editdown() {
        this.newcolor1 = true;
      },
      //修改按钮弹起
      editup() {
        this.newcolor1 = false;
      },
      //点击删除按钮
      deletedown() {
        this.newcolor2 = true;
      },
      //删除按钮弹起
      deleteup() {
        this.newcolor2 = false;
      },
      //关闭删除弹出框
      deleteClose(row) {
        this.$refs.singleTable.setCurrentRow(row);
        this.currentRow = null;
        this.dialogVisible = false;
        this.clickRow = {};
        document.documentElement.style.overflow = 'auto';
      },
      //关闭修改弹出框
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //删除功能
      deletedata(row) {
        if (this.currentRow == null) {
          document.documentElement.style.overflow = 'hidden';
          this.editdialogVisible = !this.editdialogVisible;
        } else {
          this.dialogVisible = true;
          document.documentElement.style.overflow = 'hidden';
          this.$refs.singleTable.setCurrentRow(row);
        }
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.success();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.success();
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //搜索功能
      searchMsg() {
        this.currentPage = 1;
        var condi = {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        };
        axios.post(this.url + "/position/getPositionList", condi).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        });
      }
    },
    mounted() {
    },
    watch: {
      inputValue: function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.success();
        }
      }
    },
    components: {}
  };
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .textactive {
    color: #1099ff;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .add {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    padding: 7px 15px !important;
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .delete {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #2f61ac 0%, #314159 100%);
    padding: 7px 15px !important;
  }
  
  .delete:hover {
    color: #fff !important;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .btn1 .el-input {
    width: 140px;
    height: 30px;
  }
  
  .hand {
    color: #757575;
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1700px) {
    .dialogBox {
      width: 320px;
      height: 400px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }

</style>
